﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_DataView.aspx.cs" Inherits="Demo_ASPX_Ajax_DataView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Micro Ajax DataView instead of Gridview</title>
    <style type="text/css">
        .loading { position: absolute; bottom: 0px; left: 0px; width: 100px; height: 30px; background-color: Yellow; line-height: 30px; }
        .sys-template { display: none; }
        .column { float: left; padding-top: 2px; width: 188px; height: 20px; color: Red; border-width: 1px; border-color: black; border-style: solid; overflow-y: hidden; }
    </style>
    <script type="text/javascript" language="javascript">

        var view = null;

        window.onload = function () {
            Sys.require(Sys.components.dataView, function (result) {
                view = Sys.create.dataView($get("dvUsers"));
                AjaxDataViewService.GetUsers("", GetUserCallback);
            });
        }

        function GetUserCallback(result) {
            view.set_data(result);
        }

        function Button1_onclick() {
            var CustomerIDPattern = $get("Text1").value;
            AjaxDataViewService.GetUsers(CustomerIDPattern, GetUserCallback);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableCdn="true">
        <Services>
            <asp:ServiceReference Path="~/Demo_ASPX/AjaxDataViewService.svc" />
        </Services>
        <Scripts>
            <asp:ScriptReference Name="MicrosoftAjax.js" Path="http://ajax.microsoft.com/ajax/beta/0911/MicrosoftAjax.js" />
            <asp:ScriptReference Path="http://ajax.microsoft.com/ajax/beta/0911/start.debug.js" />
        </Scripts>
    </asp:ScriptManager>
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true" DisplayAfter="10">
        <ProgressTemplate>
            <div class="loading">
                Loading....
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <div>
        用户名：
        <input id="Text1" type="text" />
        <input id="Button1" type="button" value="查询" onclick="return Button1_onclick()" />
        <div id="dvUsers" class="sys-template" style="width: 575px;">
            <div class="column" id="colCustomerID">
                {binding CustomerID}
            </div>
            <div class="column" id="colCompanyName">
                {binding CompanyName}
            </div>
            <div class="column" id="colContactName">
                {binding ContactName}
            </div>
        </div>
    </div>
    <div>
        参考文章： http://www.cnblogs.com/warensoft/archive/2010/03/23/1692074.html
        <br />
        http://stevenbenner.com/2010/03/microsoft-ajax-4-0-dataview-templates-vs-jtemplates-and-pure/
    </div>
    </form>
</body>
</html>
